<template>
  <a-card>
    <!--  筛选设备  -->
    <a-form-model :model="form" :rules="rulesform" layout="inline">
      <a-row>
        <a-col :span="6">
          <a-form-model-item prop="FarmId">
            <template #label>
              <span class="custom-label">项 目</span>
            </template>
            <a-select v-model="form.FarmId" placeholder="请选择项目" @change="farmChange" style="width: 230px">
              <a-select-option :value="item.FarmId" v-for="(item,index) in farmList" :key="index">
                {{ item.FarmName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="HouseId">
            <template #label>
              <span class="custom-label">大 棚</span>
            </template>
            <a-select v-model="form.HouseId" placeholder="请选择大棚" @change="HouseChange" style="width: 230px">
              <a-select-option :value="item.HouseId" v-for="(item,index) in HouseList" :key="index">
                {{ item.HouseName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="GwCode">
            <template #label>
              <span class="custom-label">网 关</span>
            </template>
            <a-select v-model="form.GwCode" placeholder="请选择网关" @change="GwChange" style="width: 230px">
              <a-select-option :value="item.GwCode" v-for="(item,index) in GwList" :key="index">
                {{ item.GwCode }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item prop="SensorCode">
            <template #label>
              <span class="custom-label" style="width: 80px">节点设备SN</span>
            </template>
            <a-select v-model="form.SensorCode" placeholder="请选择节点设备SN" @change="SensorChange" style="width: 230px">
              <a-select-option :value="item.SensorCode" v-for="(item,index) in SensorList" :key="index">
                {{ item.SensorCode }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!--  导航切换  -->
    <Sensor :SensorCode="form.SensorCode" :ProductKey="form.ProductKey" :GwCode="form.GwCode"></Sensor>
  </a-card>
</template>

<script>
import {list as farmList} from "@/services/farm";
import {getSensorGw} from "@/services/sensor";
import Sensor from '@/pages/device/components/Sensor.vue'
export default {
  components: {
    'Sensor':Sensor
  },
  data() {
    return {
      /*  筛选设备  */
      farmList: [],//项目列表
      HouseList: [],//大棚列表
      GwList:[],//网关
      SensorList:[],//节点设备SN
      form: {
        FarmId: undefined,//项目ID
        HouseId: undefined,//大棚ID
        GwCode: undefined,//网关
        SensorCode: undefined,//节点设备SN
        ProductKey:undefined
      },
      rulesform: {
        FarmId: {required: true, message: '请选择项目', trigger: 'select'},//项目ID
        HouseId: {required: true, message: '请选择大棚', trigger: 'select'},//大棚ID
        GwCode: {required: true, message: '请选择网关', trigger: 'select'},//网关
        SensorCode: {required: true, message: '请选择节点设备SN', trigger: 'select'},//节点设备SN
      },
    };
  },
  created() {
    this.getFarmList()
  },
  methods: {
    // 选择项目列表
    async getFarmList() {
      let res = await farmList()
      this.farmList = res.Code === 0 ? res.Data : []
    },
    //选择项目事件[大棚列表赋值]
    farmChange(e) {
      let _this = this;
      // 清空已选大棚、设备
      _this.form.HouseId = undefined
      _this.form.GwCode = undefined
      _this.form.SensorCode = undefined
      _this.form.ProductKey = undefined
      // 赋值当前大棚列表
      _this.farmList.forEach((item) => {
        if (item.FarmId === e) {
          _this.HouseList = item.GrantHouses
        }
      })
    },
    //选择大棚事件[网关赋值]
    async HouseChange(e) {
      let _this = this;
      // 清空已选设备
      _this.form.GwCode = undefined
      _this.form.SensorCode = undefined
      _this.form.ProductKey = undefined
      let res = await getSensorGw(e)
      let GwLists = res.Code === 0 ? res.Data : []
      _this.GwList = []
      GwLists.forEach((item) => {
        const GwIndex = _this.GwList.findIndex((e) => {
          return e.GwCode === item.GwCode
        })
        if (GwIndex !== -1){
          _this.GwList[GwIndex].children.push(item)
        }else {
          _this.GwList.push({
            GwCode:item.GwCode,
            children:[item]
          })
        }
      })
    },
    //选择网关事件[节点设备SN列表赋值]
    GwChange(e) {
      let _this = this;
      // 清空已选大棚、设备
      _this.form.SensorCode = undefined
      _this.form.ProductKey = undefined
      // 赋值当前大棚列表
      _this.GwList.forEach((item) => {
        if (item.GwCode === e) {
          _this.SensorList = item.children
        }
      })
    },
    //选择设备SN
    SensorChange(e){
      let _this = this
      const SensorIndex = _this.SensorList.findIndex((item) => {
        return e === item.SensorCode
      })
      if (SensorIndex !== -1){
        _this.form.SensorCode = _this.SensorList[SensorIndex].SensorCode
        _this.form.ProductKey = _this.SensorList[SensorIndex].ProductKey
      }
    }
  },
};
</script>

<style scoped>
.custom-label {
  width: 60px;
  display: inline-block;
  text-align: center;
}

/deep/ .ant-form-inline .ant-form-item-with-help {
  margin-bottom: 0;
}

</style>
